import { useRef } from "react"

/* 
包含表单的组件:  非受控组件
不定义state, 在点击提交按钮时, 直接读取input标签的value来收集数据
要用useRef技术
*/
export default function FormTest() {

  // 创建ref容器
  const nameRef = useRef()
  const pwdRef = useRef()

  const login = (e) => {
    // 不想提交表单 => 阻止事件的默认行为
    e.preventDefault()

    // 收集表单输入数据
    const name = nameRef.current.value
    const pwd = pwdRef.current.value

    // 发登陆请求, 提交name和pwd
    alert(`发登陆请求: name=${name}, pwd=${pwd}`)
  }

  return (
    <div>
      <form action="/xxx">
        <h2>登陆页面(非受控组件)</h2>
        {/* 将ref容器交给input */}
        用户名: <input type="text" ref={nameRef}/> <br/>
        密  码: <input type="password" ref={pwdRef}/> <br/>
        {/* 点击提交按钮, 默认行为是提交表单(页面就会刷新) */}
        <input type="submit" value="登 陆" onClick={login}/>
      </form>
    </div>
  )
}
